<template>
	<uni-nav-bar title="蓝宝石膨胀订单详情" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package" v-if="orderLists">
		<view class="space-between">
			<view>单号</view>
			<view class="center">
				<image src="../../../static/saleIcon/icon/copy.svg" mode="" style="width:40rpx;height: 40rpx;"
					@click="copyText(orderLists.order_sn)"></image>
				<text>{{orderLists.order_sn}}</text>
			</view>
		</view>
		<view class="space-between top">
			<view>下单时间</view>
			<view>{{orderLists.createtime}}</view>
		</view>
		<view class="space-between top">
			<view>充值金额</view>
			<view>{{orderLists.money}}</view>
		</view>
		<view class="space-between top">
			<view>充值者</view>
			<view>{{orderLists.driver_name}}</view>
		</view>
	</view>
	<view class="package" v-if="orderLists">
		<view class="space-between">
			<view>{{orderLists.cart_code}}</view>
			<image :src="orderLists.cart_image" mode="" style="width:100rpx;height:100rpx;border-radius: 5px;"
				@click="onPreviewImage">
			</image>
		</view>
		<view class="space-between top">
			<view>手机号</view>
			<view>{{orderLists.driver_mobile}}</view>
		</view>
		<view class="space-between top">
			<view>基础蓝宝石</view>
			<view>{{orderLists.nums}}</view>
		</view>
		<view class="space-between top">
			<view>膨胀蓝宝石</view>
			<view>{{orderLists.gem}}</view>
		</view>
		<view class="space-between top" v-if="orderLists.admin_name">
			<view>操作人</view>
			<view>{{orderLists.admin_name}}</view>
		</view>
		<view class="space-between top" v-if="orderLists.refund_gem">
			<view>本次应回收</view>
			<view>{{orderLists.refund_gem}}</view>
		</view>
		<view class="space-between top">
			<view>车友蓝宝石余额</view>
			<view>{{orderLists.driver_gem}}</view>
		</view>
		<view class="space-between top" v-if="orderLists.refund_gem_true">
			<view>本次实际回收蓝宝石</view>
			<view>{{orderLists.refund_gem_true}}</view>
		</view>
	</view>
	<view class="package">
		<view class="space-between">
			<view>处理人</view>
			<view>张欣</view>
		</view>
		<view class="space-between top">
			<view>修改后车牌号</view>
			<view>车牌号</view>
		</view>
		<view class="space-between top">
			<view>处理时间</view>
			<view>时间</view>
		</view>
	</view>
	<view class="but" @click="changeUp()">修改蓝宝石膨胀状态</view>
	<!-- 修改蓝宝石膨胀状态弹框 -->
	<Recharge ref="orderPup" :orderID="orderID" :orderLists="orderLists" @submit="init"></Recharge>

</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import { ref } from 'vue';
	import Recharge from '@c/administrator/BulletBox/recharge.vue';
	import { copyText } from '@/utils/copyText';
	import { onLoad } from '@dcloudio/uni-app';
	import { getActivityGemInfo } from '@/gql/auditor';
	import { showLoading } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	const orderPup = ref(null)
	const orderID = ref()
	const orderLists = ref()
	const imgList = ref([])
	onLoad((pearm) => {
		orderID.value = Number(pearm.id)
		init()
	})
	function init() {
		showLoading()
		const payload = {
			query: getActivityGemInfo,
			variables: {
				id: orderID.value
			},
		};
		toPublish(
			'ql/control/getActivityGemInfo',
			payload,
			(obj : any) => {
				const { getActivityGemInfo } = obj.data;
				orderLists.value = getActivityGemInfo
				if (orderLists.value.cart_image) {
					imgList.value.push(getActivityGemInfo.cart_image)
				}
			}
		);
	}
	function changeUp() {
		orderPup.value.open()
	}
	function onPreviewImage() {
		uni.previewImage({
			current: 0,
			urls: imgList.value
		});
	}
</script>

<style scoped lang="less">
	.top {
		margin-top: 20rpx;
	}

	.but {
		width: 360rpx;
		height: 98rpx;
		background: #558AF1;
		border-radius: 5px;
		color: #fff;
		text-align: center;
		line-height: 98rpx;
		margin: 80rpx auto 30rpx;
	}
</style>